<template>
  <div class="img_box">
    <div class="box">
      <img :src="img.avatar || defau" alt="头像">
      <input
        type="file"
        id="imgs"
        accept="image/png, image/jpg, image/png, image/bmp, image.gif, image/jpeg"
        @change="uploadImage">
      <label for="imgs" title="选择图片">选择图片</label>
      <button @click="sureHandel">确定</button>
      <p>请选择图片上传：仅支持JPG、JPEG、PNG、GIF、BMP等格式，图片需小于1M</p>
      <div>此模块功能还没有完成</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { updataAvatar } from 'com/shuju'
export default {
  name: 'UserImg',
  computed: {
    ...mapState({
      img: 'nowUserIntro'
    })
  },
  data () {
    return {
      defau: require('../../../../../assets/images/touxiang.gif'),
      tf: 1
    }
  },
  methods: {
    sureHandel () {
      if (this.tf === 2) {
        var data = new FormData()
        data.set('avatar', this.defau)
        updataAvatar(data, this)
        this.tf = 1
      } else {
        alert('请选择图片')
      }
    },
    uploadImage () { // 上传图片
      if (window.FileReader) {
        var reader = new FileReader()
        var f = event.target.files[0]
        if (f.size / (1024 * 1000) > 1) { // 限制文件大小和类型
          alert('文件过大')
          return 0
        } else if ((f.type === 'image/png' || f.type === 'image/jpg' ||
          f.type === 'image/jpeg' || f.type === 'image/gif' ||
          f.type === 'image/bmp') && f.size / (1024 * 1000) < 1) {
          reader.readAsDataURL(f)
          var _this = this
          reader.onload = function (evt) {
            _this.tf = 2
            _this.defau = evt.target.result
            _this.$store.state.nowUserIntro.avatar = evt.target.result
          }
        } else if (!(f.type === 'image/png' || f.type === 'image/jpg' ||
          f.type === 'image/jpeg' || f.type === 'image/gif' ||
          f.type === 'image/bmp')) {
          alert('文件类型错误')
          return 0
        }
      } else {
        alert('您的浏览器不支持')
        return 0
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .img_box{
    width: 100%
    height: 300px
    .box{
      position: relative
      width: 65%
      height: 100%
      margin-left: 50px
      div{
        position: absolute
        left: 40%
        top: 10%
        font-size: .4rem
        color: red
      }
      img{
        border: 3px solid rgb(15,153,213)
        margin-top: 20px
        width: 200px
        min-width: 200px
        min-height: 200px
        height: 200px
      }
      input{
        position: relative
        top: -47px
        opacity: 0
        margin-left: 30px
        outline: none
      }
      label{
        position: absolute
        color: rgb(255,255,255)
        display: inline-block
        width: 90px
        border-radius: 5px
        height: 28px
        bottom: 114px
        left: 231px
        line-height: 28px
        background-color: rgb(15,120,231)
        text-align: center
      }
      button{
        cursor: pointer
        position: absolute
        width: 90px
        border-radius: 5px
        height: 28px
        color: rgb(255,255,255)
        background-color: rgb(15,120,231)
        text-align: center
        left: 231px
        bottom: 74px
        outline: none
      }
      p{
        margin: 0
        margin-top: 20px
      }
    }
  }
</style>
